<template>
	<view class="main">
		<view class="upload-wrap">
			<u-upload
				@afterRead="afterRead"
				name="1"
				:deletable="false"
				:maxCount="1"
				:previewFullImage="true"
			>
				<view class="upload" slot="default">
					<image
						:src="form.avatar || '/static/default_avatar.png'"
						mode="aspectFill"
						style="width: 140rpx; height: 140rpx; border-radius: 50%"
					></image>
					<view class="icon-wrap">设置头像</view>
				</view>
			</u-upload>
		</view>
		<view class="list">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="uForm"
				labelWidth="180rpx"
				labelStyle="font-size:28rpx"
			>
				<u-form-item prop="nickName" label="昵 称">
					<u--input
						v-model="form.nickName"
						clearable
						placeholder="请输入昵称"
						border="none"
					></u--input> </u-form-item
				><u-form-item prop="trueName" label="真实姓名" required>
					<u--input
						v-model="form.trueName"
						clearable
						placeholder="请输入真实姓名"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item label="证件类型" prop="cid" @click="showSex = true" required>
					<u--input
						v-model="form.cid"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择证件类型"
						border="none"
					></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item prop="cidNo" label="证件号码" required>
					<u--input
						v-model="form.cidNo"
						clearable
						placeholder="请填写正确的证件号码"
						border="none"
						type="idcard"
						maxlength="18"
					></u--input>
				</u-form-item>
				<view class="tips">证件号将作为您报名及查询成绩的唯一凭证，请正确填写</view>
			</u--form>
			<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择证件类型"
				@close="showSex = false"
				@select="sexSelect"
				round="14"
			>
			</u-action-sheet>
			<button class="footer-btn" @click="submit">开始</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
const { uploadFunc } = require('@/utils/upload.js')
import Common from '@/utils/common.js'
export default {
	data() {
		return {
			userinfo: {},
			fileList1: [],
			form: {
				trueName: '',
				cid: '',
				cidNo: '',
				avatar: '',
				nickName: ''
			},
			rules: {
				trueName: [
					{
						required: true,
						message: '请输入真实姓名',
						trigger: ['change', 'blur']
					}
				],
				cidNo: [
					{
						required: true,
						message: '请填写正确的证件号码',
						trigger: ['change', 'blur']
					}
				],
				cid: {
					type: 'string',
					required: true,
					message: '证件类型',
					trigger: ['blur', 'change']
				}
			},
			actions: [
				{ name: '身份证', id: '1' },
				{ name: '护照', id: '2' }
			],
			showSex: false,
			isLock: false //是
		}
	},
	onLoad(options) {
		this.form.mobile = options.phone
		// this.getInfo()
	},
	methods: {
		getInfo() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			/* prettier-ignore */
			this.$https( true, 'post', {
				url: '/Home/Cinema/getInfo',
				data: {
					token: uni.getStorageSync('token')
				}
			}, (res) => {
				res.data.cin_logo = res.data.cin_logo || '/static/my_default_img.png'
				this.userinfo = res.data
			})
			/* prettier-ignore */
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			this.form.avatar = event.file.url
			this.fileList1 = [event.file]
		},
		uploadFilePromise(url) {
			const that = this
			return new Promise((resolve, reject) => {
				/* prettier-ignore */
				uploadImage( url, `avatar/${that.userinfo.cin_admin_phone}/`, function (result) {
					console.log('======上传成功图片地址为：', result)
					that.userinfo.cin_logo = result
					that.submit()
					setTimeout(() => {
						resolve(result)
					}, 500)
				},
				function (result) {
					console.log('======上传失败======', result)
				})
				/* prettier-ignore */
			})
		},
		submit() {
			this.$refs.uForm.validate().then(async (valid) => {
				const {cid_value, ...data}= this.form
				if (!this.fileList1.length) {
					uni.$u.toast('请上传头像！')
					return
				}
				const result = await uploadFunc(this.fileList1)
				data.avatar = result.length?result[0].url:''
				data.cid = cid_value
			/* prettier-ignore */
				this.$https( false, 'post', {
					url: '/login/login/reg',
					data
				},(res) => {
					Common.HokdoInit(res)
				})
			}).catch((error) => {
				console.log(error)
				uni.$u.toast(typeof error === 'object'? '请完善信息后提交！':error )
			})
			/* prettier-ignore */
		},
		sexSelect(e) {
			console.log(e)
			this.form.cid = e.name
			this.form.cid_value = e.id
			this.$refs.uForm.validateField('cid')
		}
	}
}
</script>

<style lang="scss" scoped>
.upload {
	position: relative;
	margin: 0 auto;
	&-wrap {
		width: 140rpx;
		margin: 68rpx auto 72rpx;
	}
	&-txt {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.7);
		margin-top: 12rpx;
	}
	::v-deep {
		.u-upload__wrap__preview {
			margin: 0 !important;
			align-items: center !important;
		}
		.u-upload__wrap {
			align-items: center !important;
			justify-content: center !important;
		}
	}
}
.icon-wrap {
	height: 48rpx;
	width: 100%;
	text-align: center;
	color: #999;
	font-size: 26rpx;
	margin-top: 16rpx;
}
.list {
	padding: 0 50rpx;
}
.footer-btn {
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #e50012;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #fff;
	margin: 120rpx auto;
}
.tips {
	font-size: 26rpx;
	color: #999;
	margin-top: 40rpx;
	text-align: center;
}
::v-deep {
	.u-form-item {
		margin-bottom: 20rpx;
	}
}
</style>
<style>
page {
	background-color: #fff;
}
</style>
